// 补课详情
<template>
  <el-dialog
    v-model="dialogVisible"
    title="补课详情"
    :before-close="handleDialogClose"
  >
    <div class="content">
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="(item, index) in list"
          :key="index"
          :timestamp="item.createDate"
          :color="colorMap[item.state]"
          placement="top"
        >
          <div>
            到课状态：{{
              {
                "1": "未开课",
                "2": "到课",
                "3": "迟到",
                "4": "请假",
                "5": "未到",
              }[item.state]
            }}
          </div>
          <div>上课班级：{{ item.className }}</div>
          <div>上课时间：{{ item.classDate }}</div>
          <div>上课老师：{{ item.teacherName }}</div>

          <div v-if="item.remark">备注：{{ item.remark }}</div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-dialog>
</template>

<script setup>
import { makeupDetailListAPI } from "@/api/registrar/class";
const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { proxy } = getCurrentInstance();
// 变量--------------------------------------------------------------------------------------------------------------------
const loading = ref(false);
const dialogVisible = ref(false);

const list = ref([]);
const colorMap = ref({
  1: "#409eff",
  2: "#0bbd87",
  3: "#FC9C6B",
  4: "#ffeb3b",
  5: "ff0000",
});

// 事件--------------------------------------------------------------------------------------------------------------------

function openW(row) {
  dialogVisible.value = true;
  makeupDetailList(row);
}

function handleDialogClose() {
  dialogVisible.value = false;
}

// 方法-------------------------------------------------------------------------------------------------------------------
function makeupDetailList(row) {
  loading.value = true;
  makeupDetailListAPI({ orderNo: row.orderNo, studentId: row.studentId }).then(
    (response) => {
      list.value = response.data;
      loading.value = false;
    }
  );
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped></style>
